<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <title>学术</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #fff;}
    .h20 {height: 0.5rem;background: #f0f0f0;}

    .fbyh {
      padding: 0 1rem;
    }
    .fbyh input[type="text"] {
      font-size: 0.8rem;
      color: #333;
      border: none;
      border-bottom: 1px dashed #dcdcdc;
    }
    .fbyh h6 {
      color: #999;
        font-size: 0.8rem;
      line-height: 0.8rem;
      margin-top: 0.5rem;
    }
    .fbyh .upload {
      margin-top: 0.5rem;
      position: relative;
      background: #ececec;
      width: 8rem;
      padding: 2rem 0;
    }
    .fbyh .upload img {
      width: 32px;
      margin: auto;
    }
    .fbyh input[type="file"] {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 10;
    }
    .upload > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }
    .upload > span {
      position: absolute;
      top: 3px;
      right: 3px;
      font-size: 0.8rem;
      line-height: 1rem;
      text-align: center;
      width: 1rem;
      height: 1rem;
      z-index: 11;
      background: #ff5757;
      border-radius: 50%;
      -webkit-border-radius: 50%;
    }
    .fbyh textarea {
      margin-top: 0.5rem;
      color: #999;
      font-size: 0.8rem;
      line-height: 0.8rem;
    }
    /* 头部样式 */
    #thridHeader {
      background: #2997e4;
      padding-top: 20px;
    }
    .topbar {background: #2997e4; height:2rem; border-bottom: 1px solid #DDDFE3;}

    .whitebar {background-color: #2997e4;}
    #thridHeader.tran > .whitebar {
      background: transparent;
    }
   .topbar {position:relative;}
    ul {display: -webkit-box; display: -webkit-flex; display: flex; }
    .back {float: left; }
    .back img {height: 1rem;margin-top: 0.5rem;margin-left: 0.75rem;}
    .topbar .title {line-height: 2rem;text-align: center;font-size: 1rem;color: #fff;}

   .topbar #text_r {position: absolute;right: 0;color: #fff;font-size: 0.8rem;margin: 0.5rem 0.75rem;bottom: 0;}
	</style>
</head>
<body>
  <div id="app">
    <div id="thridHeader" class="titlebar">
      <div class="topbar whitebar">
        <div class="back"  tapmode="" onclick="goback()"><img src="../../image/ic_back_u.png" alt=""></div>
        <div class="title" id="title">发布疑惑</div>
        <div id="text_r"  tapmode="" @click="fb()">发布</div>
      </div>
    </div>

<div class="fbyh">
  <input type="text" placeholder="请输入标题" v-model="title">
  <h6>添加图片</h6>
  <div class="upload" @click="showAction()">
    <img src="../../image/jr3@3x.png" alt="">
    <div :style="'background:url('+imageStr+') no-repeat center/cover'" v-show="imageStr != ''"></div>
    <span @click="clearImg" v-show="imageStr != ''">×</span>
  </div>
  <textarea placeholder="输入正文" v-model="content"></textarea>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
function goback () {
  api.closeWin({name:api.pageParam.name});
}
// 完成首页初始化
apiready = function(){
//  var FNImageClip = api.require('FNImageClip');



	var app = new Vue({
		el: '#app',
		data: {
      title: '',
      content: '',
      imageStr: '',
      token:''
		},
		created: function() {


      var $_this = this;


      $_this.token = $api.getStorage('token')


		},

		methods: {
      fb: function () {
        var $_this = this;

        if ($_this.title == '') {
          //alert('请输入文章标题')
          api.toast({ msg: '请输入文章标题',duration: 2000,location:'middle' });
          return
        }
        if($_this.imageStr == ''){
          api.toast({
              msg: '请上传图片',
              duration: 2000,
              location:'middle'
          });
          return;
        }

        if ($_this.content == '') {
          //alert('请输入文章详情')
          api.toast({ msg: '请输入文章详情',duration: 2000,location:'middle' });
          return
        }
  			api.ajax({
  				url: window.Url.addArticle,
          method: 'post',
          headers: {
			        'Content-Type': 'application/json',
                  'baseParams': $api.getStorage('token') //token
          },
          data: {
            body: {
              title: $_this.title, //活动标题
              classifyId: 7,
              content: $_this.content,
              newsImage: $_this.imageStr,
            }
          },
  				timeout: 300,
  			}, function(ret, err) {
  					if (ret) {
              if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }
              // api.alert({ msg: JSON.stringify(ret) });
              if (ret.code == 0) {
                api.toast({ msg: '发布成功',duration: 2000,location:'middle' });
                goback()
              } else {
                api.alert({ msg: JSON.stringify(ret.message) });
              }
  					} else {
  							api.alert({ msg: JSON.stringify(err) });
  					}
  			})
      },
      clearImg: function (e) {
        var $_this = this
        $_this.imageStr = ''
        e.stopPropagation()
      },
      // 上传图片
      showAction: function (){
        var $_this = this
        api.actionSheet({
            title: '文章图片上传',
            cancelTitle: '取消',
            buttons: ['拍照','从手机相册选择']
        }, function(ret, err) {
            if (ret) {
                $_this.getPicture(ret.buttonIndex);
            }
        });
      },
      getPicture: function (sourceType) {
        var $_this = this
              if(sourceType==1){ // 拍照
                  api.getPicture({
                      sourceType: 'camera',
                      encodingType: 'jpg',
                      mediaValue: 'pic',
                      allowEdit: false,
                      destinationType: 'base64',
                      quality: 90,
                      saveToPhotoAlbum: true
                  }, function(ret, err) {
                      if (ret) {

                        var formData=ret.data;
                        var formData=ret.base64Data;
                        api.ajax({
                            method:"post",
                            url:window.Url.addPicture,
                               data: {
                                 files: {file: ret.data}
                               }

                        },function(ret,err){
                            if(ret){
                              if(ret.error == '0')
                              {
                                  $_this.imageStr = ret.url
                              }
                              else{
                                api.alert({msg:ret.message});
                              }
                              console.log("图片返回"+JSON.stringify(ret))
                            }else{
                                api.toast({
                                  msg : '你没有选择图片',
                                  location : 'middle'
                                })
                            }
                        })
                      }else {
                          alert(JSON.stringify(err));
                      }
                  });
              }
              else if(sourceType==2){ // 从相机中选择
                  api.getPicture({
                          sourceType: 'album',
                          encodingType: 'png',
                          mediaValue: 'pic',
                          destinationType: 'url',
                          allowEdit:true,
                          quality: 50,
                          saveToPhotoAlbum:false,
                          targetWidth: 750,
                          targetHeight: 750
                      }, function(ret, err) {
                          if (ret) {
                              var formData=ret.data;
                              // $('.img').prop('src',ret.data);
                              var formData=ret.base64Data;
                              api.ajax({
                                  method:"post",
                                  url:window.Url.addPicture,
                                     data: {
                                       files: {file: ret.data}
                                     }

                              },function(ret,err){
                                  if(ret){
                                    if(ret.error == '0')
                                    {
                                        $_this.imageStr = ret.url
                                    }
                                    else{
                                      api.alert({msg:ret.message});
                                    }
                                    console.log("图片返回"+JSON.stringify(ret))
                                  }else{
                                      api.toast({
                            						msg : '你没有选择图片',
                            						location : 'middle'
                            					})
                                  }
                              })
                          } else {
                              api.alert({msg:JSON.stringify(err)});
                          }
                  });
              }
          }
		}
	})
}
</script>
</html>
